<template>
  <div class="money">
    <h3>缴费管理</h3>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="搜索">
        <el-input
          v-model="formInline.user"
          placeholder="请输入用户姓名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="formInline.address"
          placeholder="请输入用户住址"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="onSubmit">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      border
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="user_name" label="用户名" width="150">
      </el-table-column>
      <el-table-column
        prop="user_address"
        label="住址"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="user_cate"
        label="缴费类型"
        width="150"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-if="scope.row.user_cate == 1">物业费</span>
          <span v-else-if="scope.row.user_cate == 2">电梯费</span>
          <span v-else-if="scope.row.user_cate == 3">垃圾费</span>
          <span v-else-if="scope.row.user_cate == 4">暖气费</span>
          <span v-else-if="scope.row.user_cate == 5">车位管理费</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="user_price"
        label="缴费金额"
        width="150"
      ></el-table-column>
      <el-table-column label="缴费状态" width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.user_status == "1" ? "已缴费" : "未缴费"
          }}</span>
        </template>
      </el-table-column>
      <!-- dateFormat -->
      <el-table-column label="用户缴费时间" width="250">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.user_paytime | dateFormat
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 弹出框 -->
    <div class="userModel">
      <div class="mask" v-show="userBoolean" @click="cancelModel"></div>
      <div class="content" :class="userBoolean ? 'userContent' : ''">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <h3>{{ modelTitle }}用户</h3>
          <el-form-item label="用户名" prop="user_name">
            <el-input
              v-model="ruleForm.user_name"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item label="住址" prop="user_address">
            <el-input
              v-model="ruleForm.user_address"
              placeholder="请输入用户住址"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="缴费类型" prop="user_cate">
            <el-checkbox-group v-model="form.type">
              <el-checkbox label="物业费" name="type" ></el-checkbox>
              <el-checkbox label="电梯费" name="type"></el-checkbox>
              <el-checkbox label="垃圾费" name="type"></el-checkbox>
              <el-checkbox label="暖气费" name="type"></el-checkbox>
              <el-checkbox label="车位管理费" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item> -->
          <el-form-item label="缴费类型" prop="user_cate" width="500">
            <el-input
              v-model="ruleForm.user_cate"
              placeholder="1:物业费；2：电梯费；3：垃圾费；4：暖气费；5：车位管理费"
              class="cate"
            ></el-input>
          </el-form-item>
          <el-form-item label="缴费金额" prop="user_price">
            <el-input
              v-model="ruleForm.user_price"
              placeholder="请输入金额"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="缴费时间">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.date1"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-time-picker
                placeholder="选择时间"
                v-model="form.date2"
                style="width: 100%"
              ></el-time-picker>
            </el-col>
          </el-form-item> -->
          <el-form-item label="缴费状态" prop="user_status">
            <el-radio-group v-model="ruleForm.user_status">
              <el-radio :label="'1'">已缴费</el-radio>
              <el-radio :label="'2'">未缴费</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">{{
              modelTitle
            }}</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
// import * as http from "../api/http"
//导入封装的api方法
import {
  getUserList,
  addUser,
  delUser,
  userDetail,
  changeUser,
} from "../api/api";
export default {
  name: "Money",
  components: {},
  data() {
    return {
      form: {
        regin: "",
        date1: "",
        date2: "",
        type: [],
      },
      formInline: {
        user: "",
        region: "",
      },
      tableData: [],
      multipleSelection: [],
      userBoolean: false,
      ruleForm: {
        user_name: "",
        user_address: "",
        user_status: "",
        user_price: "",
        user_cate: "",
        user_paytime: "",
      },
      rules: {
        user_name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        user_address: [
          { required: true, message: "请输入用户地址", trigger: "blur" },
        ],
        user_status: [
          { required: true, message: "请选择缴费状态", trigger: "change" },
        ],
        user_price: [
          { required: true, message: "请选择缴费金额", trigger: "blur" },
        ],
        user_cate: [
          { required: true, message: "请选择缴费类型", trigger: "blur" },
        ],
      },
      total: 0,
      page: 1,
      size: 5,
      modelTitle: "添加",
      user_id: null,
    };
  },
  methods: {
    //点击查询搜索用户
    onSearch() {
      console.log(this.formInline.user);
      this.getList();
    },
    //添加显示模态窗口
    onSubmit() {
      console.log("submit!");
      this.modelTitle = "添加";
      this.userBoolean = true;
    },
    //表格全选反选
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //点击条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.getList();
    },
    //点击页码
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.getList();
    },
    //添加用户
    //点击提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm);
          if (this.modelTitle == "添加") {
            //添加接口
            addUser({
              user_name: this.ruleForm.user_name,
              user_address: this.ruleForm.user_address,
              user_status: this.ruleForm.user_status,
              user_cate: this.ruleForm.user_cate,
              user_price: this.ruleForm.user_price,
              user_paytime: this.ruleForm.user_paytime,
            }).then((res) => {
              console.log(res);
              if (res.code == 200) {
                Message({
                  message: "恭喜你，添加成功!",
                  type: "success",
                });
                this.getList();
                this.userBoolean = false;
              } else if (res.code == 201) {
                Message({
                  message: res.messages,
                  type: "success",
                });
              }
            });
          } else if (this.modelTitle == "修改") {
            //修改接口
            changeUser({
              user_id: this.user_id,
              user_name: this.ruleForm.user_name,
              user_address: this.ruleForm.user_address,
              user_status: this.ruleForm.user_status,
              user_cate: this.ruleForm.user_cate,
              user_price: this.ruleForm.user_price,
              user_paytime: this.ruleForm.user_paytime,
            }).then((res) => {
              console.log(res);
              if (res.code == 200) {
                Message({
                  message: res.messages,
                  type: "success",
                });
                this.userBoolean = false;
                //刷新列表
                this.getList();
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //查询列表
    getList() {
      //   this.axios.get("http://localhost:3000/selectUser").then((res) => {
      //     console.log(res)
      //     this.tableData = res.data.data;
      //     console.log(this.tableData);
      //   })
      // console.log(http)
      // http.get("/selectUser").then((res)=>{
      //   console.log(res)
      // })
      console.log(getUserList);
      getUserList({
        page: this.page,
        size: this.size,
        user_name: this.formInline.user,
        user_address: this.formInline.address,
      }).then((res) => {
        console.log(res);
        this.tableData = res.data;
        this.total = res.total;
      });
    },
    //删除
    handleDelete(index, row) {
      console.log(index, row);
      delUser({ id: row.user_id }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          Message({
            message: "恭喜你，删除成功！",
            type: "success",
          });
          this.tableData.splice(index, 1);
        }
      });
    },
    //点击编辑
    handleEdit(index, row) {
      console.log(index, row);
      this.user_id = row.user_id;
      //查询详情接口
      userDetail({ id: row.user_id }).then((res) => {
        if (res.code == 200) {
          this.user_id = res.data.user_id;
          this.ruleForm.user_name = res.data.user_name;
          this.ruleForm.user_status = res.data.user_status;
          this.ruleForm.user_address = res.data.user_address;
          this.ruleForm.user_price = res.data.user_price;
          this.ruleForm.user_cate = res.data.user_cate;
          this.ruleForm.user_paytime = res.data.user_paytime;

          this.modelTitle = "修改";
          this.userBoolean = true;
        }
      });
    },
    // 关闭模态窗口，清空内容
    cancelModel() {
      this.userBoolean = false;
      //重置表单
      this.$refs["ruleForm"].resetFields();
    },
  },
  filters: {
    // 私有过滤时间的方法
    dateFormat(date) {
      // console.log(date);
      var dt = new Date(date);
      // 获取年
      var y = dt.getFullYear();
      // console.log(y)
      // 获取月
      var m = (dt.getMonth() + 1).toString().padStart(2, "0");
      // m = m < 10 ? "0" + m : m
      // console.log(m);
      // 获取日
      var d = dt.getDate().toString().padStart(2, "0");
      // d = d < 10 ? "0" + d : d
      // console.log(d);
      // 获取时
      var hh = dt.getHours().toString().padStart(2, "0");
      // hh = hh < 10 ? "0" + hh : hh
      // 获取分
      var mm = dt.getMinutes().toString().padStart(2, "0");
      // mm = mm < 10 ? "0" + mm : mm
      // 获取秒
      var ss = dt.getSeconds().toString().padStart(2, "0");
      // ss = ss < 10 ? "0" + ss : ss;
      return `${y} - ${m} - ${d}  ${hh} : ${mm} : ${ss}`;
    },
  },
  created() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
.money {
  margin-top: 30px;
  margin-left: 30px;
  h3 {
    margin-bottom: 20px;
  }
  .userModel {
    .mask {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 99;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
    }
    .content {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      z-index: 100;
      background-color: #fff;
      transition: 0.5s;
      opacity: 0;
      padding: 30px 60px;
      border-radius: 10px;
      visibility: hidden;
      h3 {
        margin-bottom: 15px;
      }
      ::v-deep .el-form-item__label:before {
        content: "";
      }
    }
    .userContent {
      top: 15%;
      opacity: 1;
      visibility: visible;
      .el-form-item{
        .el-form-item__content{
          .el-input{
            width: 450px;
          }
        }
      }
    }
  }
  .block{
    margin-top: 10px;
  }
}
</style>